<template>
  <div>
    <!-- 左侧菜单 -->
    <div class="detail_box">
      <!-- 操作 -->
      <div class="operate_box">
        <div class="item_box">
          <div class="operate_item">
            <label>仓库：</label>
            <el-select filterable placeholder="请选择仓库" v-model="warehouseId" value-key="id">
              <el-option
                :key="item.id"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in warehouseList">
              </el-option>
            </el-select>
          </div>
          <div class="operate_item">
            <label>单号：</label>
            <el-input clearable placeholder="请输入订单单号" type="text" v-model="orderNo"></el-input>
          </div>
<!--          <div class="operate_item">-->
<!--            <label>关键词：</label>-->
<!--            <el-input clearable placeholder="请输入说明关键词" type="text" v-model="keyword"></el-input>-->
<!--          </div>-->

          <div class="operate_item">
            <label>操作类型：</label>
            <el-select filterable clearable placeholder="请选择操作类型" v-model="operateId">
              <el-option
                label="全部"
                value=""></el-option>
              <el-option
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
                v-for="(item,index) in operateList">
              </el-option>
            </el-select>
          </div>
<!--          <div class="operate_item">-->
<!--            <label>订单类型：</label>-->
<!--            <el-select filterable clearable placeholder="请选择订单类型" v-model="orderType">-->
<!--              <el-option-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--                v-for="(item,index) in orderList">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->

          <div class="operate_item">
            <span @click="getTableInfo(1)" class="operate_btn search_btn">查询</span>
            <span @click="resetTable" class="operate_btn reset_btn">重置</span>
          </div>
        </div>
        <div class="btn_box" v-if="btn&&btn.add">
          <span @click="openPopup('')" class="operate_btn search_btn" >新增</span>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table_box">
        <el-table
          :data="tableInfo"
          :header-cell-style="tableHeader"
          border
          ref="multipleTable"
          style="width: 100%;"
          tooltip-effect="dark"
          v-loading="loading">
          <el-table-column
            label="ID"
            prop="id"
            width="80">
          </el-table-column>
          <el-table-column
            label="更新时间"
            prop="modifyTime"
            sortable
            width="160">
            <template slot-scope="scope">
              <p style="text-align: left">{{ formatTime(scope.row.modifyTime) }}</p>
            </template>
          </el-table-column>

          <el-table-column
            label="商品名"
            prop="productName">
          </el-table-column>

          <el-table-column
            label="订单号"
            prop="orderNo">
            <template slot-scope="scope">
              <span>{{ scope.row.orderNo ? scope.row.orderNo : '——' }}</span>
            </template>
          </el-table-column>

          <el-table-column
            width="140"
            prop="returnNumber"
            label="变更前/后空桶数">
            <template slot-scope="scope">
              <p> {{scope.row.sourceReturnNumber?scope.row.sourceReturnNumber:0}}/{{ scope.row.returnNumber?scope.row.returnNumber:0}}</p>
            </template>
          </el-table-column>

          <el-table-column
            width="140"
            prop="sourceNumbers"
            label="变更前/后商品数">
            <template slot-scope="scope">
              <p>{{ scope.row.sourceNumbers?scope.row.sourceNumbers:0}}/{{ scope.row.numbers?scope.row.numbers:0}}</p>
            </template>
          </el-table-column>

          <el-table-column
            label="操作类型">
            <template slot-scope="scope">
              <span>{{ scope.row.operateTypeName ? scope.row.operateTypeName : '——' }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="说明">
            <template slot-scope="scope">
              <span>{{ scope.row.content ? scope.row.content : '——' }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作仓库">
            <template slot-scope="scope">
              <span>{{ scope.row.warehouseName ? scope.row.warehouseName : '——' }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作人">
            <template slot-scope="scope">
              <span>{{ scope.row.operateUserName ? scope.row.operateUserName : '——' }}</span>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="record_page">
        <span class="page_count">共<i>{{ totals }}</i>条</span>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15, 20, 30, 40]"
          :total="totals"
          @current-change="getTableInfo"
          @size-change="sizeChange"
          background
          layout="prev, pager, next, sizes,jumper">
        </el-pagination>
      </div>
    </div>
<!--    <Edit :mid="menuId" @listenToChild="listenToEdit" v-if="isPop"></Edit>-->
  </div>
</template>

<script>
  // import Edit from "./edit";
  import commons from "@/utils/common";
  import {getBtn} from "@/utils/btnAuth";
  import {judgeRole} from "@/utils/warehouseAuth";
  import {productLog} from "@/api/basic/warehouse/product";
  import {getOperate} from "@/api/basic/warehouse/orderLog";



  export default {
    name: 'orderLog',
    components: {
      // Edit
    },
    data() {
      return {
        // keyword: '',
        orderNo: '',
        operateId: '',
        orderType:'',
        operateList:[],
        orderList:[
          {id:'',name:'全部'},
          {id:1,name:'进货单'},
          {id:2,name:'出货单'},
          {id:3,name:'回收单'},
          {id:4,name:'换货单'}
        ],
        warehouseList:[],
        warehouseId:'',
        currentPage: 1,
        pageSize: 15,
        totals: 0,
        loading: false,
        tableInfo: [],
        menuId: '',
        isPop: false,
        btn: {},
        roleHouse: {},
      }
    },
    mounted() {
      this.roleHouse = judgeRole();
      this.warehouseList = this.roleHouse.list;
      this.warehouseId = this.roleHouse.id;
      this.getOperate();
      this.btn = getBtn();
      if (this.btn.query) {
        this.getTableInfo(1);
      }
    },
    methods: {
      getTableInfo(page) {
        let that = this;
        that.loading = true;
        that.currentPage = page;
        let queryParams = {
          warehouseId:that.warehouseId,
          orderType:that.orderType,
          operateId:that.operateId,
          // keyword:that.keyword,
          orderNo:that.orderNo,
          limit: that.pageSize,
          page: page
        };
        productLog(queryParams).then(res => {
          that.tableInfo = res.list ? res.list : [];
          that.totals = res.count;
          that.loading = false;
        }).catch((e) => {
          that.tableInfo = [];
          that.totals = 0;
          that.loading = false;
        });
      },

      getOperate(){
        let that=this;
        getOperate().then(res => {
          that.operateList = res ? res : [];
        }).catch((e) => {
          that.operateList = [];
        });
      },

      resetTable() {
        // this.keyword = '';
        this.orderType = '';
        this.operateId = '';
        this.orderNo = '';
        this.pageSize = 15;
        this.warehouseId = this.roleHouse.id ? this.warehouseId : '';
        this.getTableInfo(1)
      },

      // 移除
      // deleteItem(obj) {
      //   let that = this;
      //   that.$confirm('确定删除「' + obj.name + '」日志信息?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     delOrderLog(obj.id).then(res => {
      //       that.getTableInfo(that.currentPage);
      //       that.$message.success({
      //         message:'删除成功！',
      //         duration:1500
      //       });
      //     }).catch((e) => {
      //       that.$message.error({
      //         message:'删除失败，请重试',
      //         duration:1500
      //       });
      //     });
      //   }).catch(() => {
      //   });
      // },

      // 打开弹窗
      openPopup(id) {
        this.isPop = true;
        this.menuId = id;
      },

      listenToEdit(e) {
        this.isPop = false;
        if (e.refresh) {
          this.getTableInfo(this.currentPage)
        }
      },

      formatTime(time) {
        return commons.formatTime(time)
      },

      sizeChange(val) {
        this.pageSize = val;
        this.getTableInfo(1)
      },

      // 设置table标题居中
      tableHeader({row, column, rowIndex, columnIndex}) {
        return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600;'
      },
    }
  }
</script>

<style scoped>

</style>
